<template>
    <div class="quan-main">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/admin/user' }">用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="quan-body">
            <!-- 筛选 -->
            <div class="quan-sarech">
                <el-row>
                    <el-col :span="5">
                        <div class="item">
                            <label>账号</label>
                            <el-input v-model.trim="searchBy.accunt" placeholder="请输入账号" clearable></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="item">
                            <label>用户名</label>
                            <el-input v-model.trim="searchBy.username" placeholder="请输入用户名" clearable></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="item">
                            <label>地址</label>
                            <el-input v-model.trim="searchBy.address" placeholder="请输入地址" clearable></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="item">
                            <label>角色</label>
                            <el-select v-model="searchBy.identity" placeholder="请选择" clearable>
                                <el-option :label="item.name" :value="item.value" v-for="item in opt_identity" :key="item.value"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="5" style="white-space: nowrap;">
                        <el-button class="el-icon-search" type="primary" @click="searchClick"> 查询</el-button>
                        <el-button class="el-icon-refresh" @click="searchReset"> 重置</el-button>
                    </el-col>
                </el-row>
            </div>
            <!-- 展示信息表格+新增 -->
            <div class="quan-table cf">
                <!-- 新增 -->
                <el-row class="quan-option">
                    <el-col :span="4">
                        <el-button icon="el-icon-circle-plus-outline" type="primary" @click="toAdd">新增</el-button>
                    </el-col>
                    <el-col :span="20" style="text-align:right;padding-right:2px">
                        共 <span style="color:red;line-height:40px;">{{searchParams.total}} </span> 条数据
                    </el-col>
                </el-row>
                <!-- 表格 -->
                <el-row class="quan-main-table cf">
                    <el-table :data="tableData" border stripe tooltip-effect="dark" v-loading='tableLoading'>
                        <el-table-column prop="accunt" label="账号" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="username" label="用户名" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="money" label="余额" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="identity" label="角色" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="avator" label="头像" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div class="img" v-if="scope.row.avator">
                                    <img :src="scope.row.avator" alt="">
                                    <div class="oper">
                                        <i class="el-icon-zoom-in" @click="showBigImage(scope.row.avator)"></i>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <!-- <span class="el-icon-edit" size="mini" style="color:#00e28b;margin-right:8px">编辑</span>
                                <span class="el-icon-delete" size="mini" style="color:#F56C6C">删除</span> -->
                                <el-button type="primary" size="mini" icon="el-icon-edit" @click="toUpdate(scope.row)"></el-button>
                                <el-button type="danger" size="mini" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <!-- 分页 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchParams.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="searchParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="searchParams.total"></el-pagination>
            </div>
        </div>
        <!-- 组件 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :modal-append-to-body="true" :append-to-body='true' :center="true" :show-close="false" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
            <component v-bind:is="dialogCurrentComponent" @dialogCancel="dialogCancel" @dialogSubmit="dialogSubmit" :dialogInfo="dialogInfo"></component>
        </el-dialog>
    </div>
</template>
<script>
// 发请求全部导入
import api from '@/api/user/index'
// 工具
import tool from '@/utils/tool'
// 组件
import userAdd from '@/views/admin/userAdd'
export default {
    components:{
        userAdd
    },
    data() {
        return {
            // 数据源
            tableData:[],
            // 加载动画
            tableLoading:false,

            // 角色
            opt_identity:tool.identity,

            // 筛选数据
            searchBy:{
                username:'',
                identity:'',
                address:'',
                accunt:'',
            },

            // 筛选请求参数
            searchParams:{
                currentPage:1,
                pageSize:10,
                total:0,
            },

            // 图片放大
            // 接受的数组
            viewUrl:[],

            // dailog
            dialogInfo:'',
            dialogTitle:'',
            dialogFormVisible:false,
            dialogCurrentComponent:'',
        }
    },
    methods: {
        // 得到数据
        getList(){
            console.log(this.searchParams)

            this.tableLoading = true

            api.getList(this.searchParams).then(res=>{

                this.tableLoading = false

                if(res.code !== 200) return
                // if(!res.data || res.data.length<1) return
                console.log(res)
                this.tableData = res.data
                this.searchParams.total = res.total
                // 数据处理
                this.tableData.map((item,index)=>{
                    // 角色
                    item.identity = item.identity ? tool.getNameByValue(tool.identity,item.identity) : ''
                })
            })
        },
        // 页面大小改变
        handleSizeChange(newSize){
            this.searchParams.pageSize = newSize
            this.getList()
        },
        // 当前页改变
        handleCurrentChange(newPage){
            this.searchParams.currentPage = newPage
            this.getList()
        },
        // 搜索
        searchClick(){
            // 处理参数(加replace是处理结尾是\筛选不了的问题)
            this.searchParams.username = this.searchBy.username.replace(/\\/g,'\\\\')
            this.searchParams.identity = this.searchBy.identity
            this.searchParams.address = this.searchBy.address.replace(/\\/g,'\\\\')
            this.searchParams.accunt = this.searchBy.accunt.replace(/\\/g,'\\\\')

            this.searchParams.currentPage = 1
            this.getList()
        },
        // 重置
        searchReset(){
            this.searchBy = {
                username:'',
                identity:'',
                address:'',
                accunt:'',
            },
            this.searchClick()
        },
        // 新增
        toAdd(){
            this.dialogTitle = '新增用户'
            this.dialogCurrentComponent = 'userAdd'
            this.dialogInfo = ''
            this.dialogFormVisible = true
        },
        // 修改
        toUpdate(item){
            this.dialogTitle = '修改用户'
            this.dialogCurrentComponent = 'userAdd'
            this.dialogInfo = item
            this.dialogFormVisible = true
        },
        // 删除
        toDelete(item){
            // console.log(this.$store.getters.user)
            if(item.accunt === this.$store.getters.user.accunt){
                this.$message({ message: "不能删除你自己哦！", type: "warning" });
                return 
            }
            this.$confirm("确定删除这一项吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                api.deleteUser(item).then(res => {
                    console.log(res)
                    if(res.code !== 200) return;
                    this.$message({ message: "操作成功！", type: "success" });
                    this.getList();
                });
            }).catch(()=>{})
        },
        // 取消
        dialogCancel(){
            this.dialogFormVisible = false;
            this.dialogCurrentComponent = '';
        },
        // 提交
        dialogSubmit(){
            // 取消
            this.dialogCancel();
            // 刷新
            this.getList();
        },
        // 放大图片
        showBigImage(url){
            this.viewUrl = []
            this.viewUrl.push(url)
            // console.log(this.viewUrl)
            window.createPreview(this.viewUrl)
        }
    },
    created() {
        this.getList()
    },
    mounted() {
        
    },
}
</script>
<style lang="less" scoped>
// 图片放大
.img{
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    margin-left: 50%;
    transform: translateX(-50%);
    img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .oper{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: all 0.3s ease;
        text-align: center;
        color: #fff;
        background-color: rgba(0, 0, 0, .5);
        padding-top: 7px;
        opacity: 0;
        cursor: pointer;
    }
    .oper:hover{
        opacity: 1;
    }
}
</style>